<template>
	<view class="content">
		<view class="top">
			<image class="top-image" mode="scaleToFill" :src="icon2"></image>
			<view class="top-title">
				<view>当前积分</view>
				<view><text>{{currentIntegral}}</text><text></text></view>
			</view>	
			<view class="top-btn" @click="handleJumpRule">
				签到规则
			</view>
			<view class="day-wrap">
				<view class="day">
					<view class="day-top">
						<view>每日签到送积分兑换免费充电券</view>
						<view @click="handleJumpIntegral">去兑换>></view>
					</view>
					<view class="day-list">
						<view class="day-item" v-for="(item,i) in dayList" :key="i">
							<view class="day-item-bg">
								<view class="add" v-if="item.integral">+{{item.integral}}</view>
								<image v-if="item.already_sign==3"  class="day-image" mode="scaleToFill" src="@/static/images/sign-01.png"></image>
								<image v-else-if="item.already_sign==1" @click="handleSignClick(i)" class="day-image" mode="scaleToFill" src="@/static/images/sign-02.png"></image>
								<image v-else-if="item.already_sign==2" class="day-image" mode="scaleToFill" src="@/static/images/sign-03.png"></image>
							</view>
							<view class="item-di">{{item.msg}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-wrap">
			<view class="bottom">
				<view class="bottom-title-top" v-if="bottomList.length">充值天天送大礼</view>
				<view class="bottom-list" v-if="bottomList.length">
					<view class="bottom-item" v-for="(item,i) in bottomList" :key="i">
						<view>
							<view class="bottom-img-parent">
								<image class="bottom-item-img" :src="item.img"></image>
							</view>
							<!-- <view class="bottom-type">{{item.type}}</view> -->
						</view>
						<view>
							<view v-if="item.only_app==1" class="bottom-title">{{item.title}}</view>
							<view v-else class="bottom-title-active" v-else>{{item.title}}</view>
							<view class="bottom-content">{{item.applet_descript}}</view>
						</view>
						<view>
							<!--only_app是否是app独享？1不是，2是-->
							<template v-if="item.only_app==1">
								<view @click="handleReceiveClick(i)" v-if="item.already_get==1" class="bottom-receive-01">领取</view>
								<view v-else class="bottom-receive-02">已领取</view>
							</template>
							<!--app专享时，点击跳转的是一个微信客服会话框-->
							<template v-else-if="item.only_app==2">
								<view class="bottom-receive-01">
									<text>领取</text>	
									<button class="sign-btn-contact" send-message-title="下载天天充电APP" show-message-card send-message-path="/pages/index/index" open-type='contact'></button>
								</view>
							</template>	
						</view>
					</view>
				</view>
				<no-data v-if="!bottomList.length" :src="noDataSrc" :txt="noDataTxt" v-else></no-data>
			</view>
		</view>
		<view class="bottom-safe-area"></view>
		<!--popup-->
		<u-popup v-model="signShow" mode="center" border-radius="20">
			<view class="sign-popup" @click="handlePopupImgClick">
				<view class="popup-text">恭喜您今日签到获得{{clickIntegral}}积分</view>
				<image class="popup-image" mode="widthFix" :src="icon"></image>
			</view>
		</u-popup>
		<!--单悬浮客服-->
		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//top
				dayList:[],
				currentIntegral:'',//用户拥有的积分;
				clickIntegral:'',//用户点击签到时要获取多少积分，提交给接口时使用，获取成功在成功弹窗中也显示;
				//bottom
				noDataSrc:this.$noData,
				noDataTxt:'暂无活动，敬请期待...',
				bottomList:[],
				currentReceiveIndex:null,
				//popup
				signShow:false,
				icon:this.$imgUrl+'sign/sign-success.png',
				icon2:this.$imgUrl+'sign/sign.png',
			}
		},
		onShow() {
			this.getSignDataRequest();
		},
		methods: {
			//顶部
			getSignDataRequest(){
				
				this.$u.api.getSignData().then(res=>{
					if(res.result_code==300){
						this.dayList=res.data.list;//top
						this.currentIntegral=res.data.integration;//积分
						this.bottomList=res.data.card_list;//bottom
					}else{
						this.$utils.toast(res.msg);
					}
				}).catch();
			},
			handleSignClick(i){
				let clickIntegral=this.dayList[i].integral;
				this.clickIntegral=clickIntegral;
				this.getGoSignRequest(clickIntegral);
			},
			getGoSignRequest(clickIntegral){
				this.$u.api.getGoSign({
					
					integral:clickIntegral,
				}).then(res=>{
					if(res.result_code == 352){
						this.getSignDataRequest();
						this.signShow=true;
					}else{
						this.$utils.toast(res.msg);
					};
				}).catch();
			},
			handlePopupImgClick(){
				this.signShow=false;
			},
			//规则
			handleJumpRule(){
				uni.navigateTo({
					url: '/pages/sign/rule'
				});
			},
			//积分兑换
			handleJumpIntegral(){
				uni.navigateTo({
					url: '/pages/integral/index'
				});
			},
			//底部列表
			//非app专享时的领取
			handleReceiveClick(index){
				//debounce
				this.currentReceiveIndex=index;
				this.$u.debounce(this._receive,this.$debounceTime,true);
			},
			_receive(){
				if(this.bottomList[this.currentReceiveIndex].is_get==1){
					let price=this.bottomList[this.currentReceiveIndex].price;
					let id=this.bottomList[this.currentReceiveIndex].kind_id;
					
					
					this.$utils.modal({
						content:'您还没有购买相关权益是否购买？',
						callback:(bool)=>{
							if(bool) {
								uni.navigateTo({
									url: `/pages/sign/sign-pay?price=${price}&id=${id}`
								});
							}
						}
					});
				}else{
					//正常领取，调用接口
					this.signReceiveRequest(this.bottomList[this.currentReceiveIndex].kind_id);
				};
			},
			signReceiveRequest(id){
				this.$u.api.signReceive({
					
					kind_id:id,
				}).then(res=>{
					if(res.result_code == 357){
						this.$utils.toast('领取成功');
						this.getSignDataRequest();
					}else{
						this.$utils.toast(res.msg);
					};
				}).catch();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-image{
		width:100%;
		height:400rpx;
		display: block;
	}
	.top{
		height:320rpx;
		position: relative;
	}
	.top-title{
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		top:60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.top-title>view:nth-child(2) text:nth-child(1){
		font-size: 60rpx;
		line-height: 1;
		font-weight: 500;
	}
	.top-title>view:nth-child(2){
		padding-top:20rpx;
	}
	.top-btn{
		position: absolute;
		top:156rpx;
		right:0;
		width:112rpx;
		height:40rpx;
		line-height: 38rpx;
		font-size: 20rpx;
		color:#111111;
		background-color:#FFD819;
		text-align: center;
		border-radius:20rpx 0 0 20rpx;
	}
	.day-wrap{
		position: absolute;
		left:0;
		top:240rpx;
		width:100%;
		padding:0 24rpx;
		box-sizing: border-box;
	}
	.day{
		min-height: 318rpx;
		background-color:#fff;
		box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		padding:30rpx 24rpx;
	}
	.day-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 30rpx;
	}
	.day-top view:nth-child(2){
		font-size: 24rpx;
		color:#3A62D7;
	}
	.day-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.day-item{
		width:100rpx;
		text-align: center;
	}
	.day-image{
		width:60rpx;
		height:60rpx;
		vertical-align: middle;
		margin-top: 6rpx;
	}
	.day-item-bg{
		background-color:#f5f6fa;
		width:100%;
		padding:20rpx;
		border-radius:12rpx;
	}
	.item-di{
		padding-top: 12rpx;
		color:#666666;
		font-size:22rpx;
	}
	.bottom-item-img{
		width:110rpx;
		height:110rpx;
		vertical-align: middle;
	}
	.bottom-img-parent{
		position: relative;
		font-size:24rpx;
		color:#fff;
		height:120rpx;
	}
	.bottom-img-parent view{
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.bottom-wrap{
		padding:24rpx;
		padding-top:266rpx;
	}
	.bottom{
		padding:24rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		min-height: 600rpx;
	}
	.bottom-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28rpx;
	}
	.bottom-item>view:nth-child(1){
		width:118rpx;
		margin-right: 14rpx;
		border:2rpx solid #e5e5e5;
		text-align: center;
		
	}
	.bottom-item>view:nth-child(2){
		flex: 1;
	}
	.bottom-item>view:nth-child(3){
		width:110rpx;
	}
	.bottom-type{
		line-height:1;
		font-size: 22rpx;
		color: #666666;
		padding:10rpx 0;
	}
	.bottom-item-time{
		font-size: 32rpx;
		font-weight: bold;
	}
	.bottom-title{
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 14rpx;
	}
	.bottom-title-active{
		font-size: 26rpx;
		font-weight: 500;
		color: #FA5252;
		padding-bottom: 14rpx;
	}
	.bottom-content{
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
	.bottom-receive-01,.bottom-receive-02{
		width:110rpx;
		height:48rpx;
		line-height: 46rpx;
		font-size:22rpx;
		background: linear-gradient(90deg, #0DA297 0%, #26C494 100%);
		border-radius: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: relative;
	}
	.bottom-receive-02{
		background:#ccc;
		
	}
	.sign-btn-contact{
		width:100%;
		height:100%;
		position: absolute;
		left:0;
		top:0;
		opacity:0;
	}
	.bottom-title-top{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 40rpx;
	}
	.popup-image{
		width:560rpx;
		height:680rpx;
		display: block;
	}
	.sign-popup{
		position: relative;
		
	}
	.popup-text{
		text-align: center;
		width:100%;
		position: absolute;
		top:154rpx;
		left:50%;
		font-size: 24rpx;
		color: #999999;
		transform: translateX(-50%);
	}
</style>
<style>
	page{
		background-color:#f5f6fa;
	}
</style>

